<template>
  <div class="app-container">
    <input type="text" autocomplete="off" v-model="form.activityId" placeholder="活动id">
    <!-- <input type="text" autocomplete="off" v-model="stationName" placeholder="展点名称"> -->
    <button type="button" @click="fetchActivities">
      <span>查询</span>
    </button>
    <button type="button" @click="refetchStations">
      <span>重置</span>
    </button>
    <br>

    <!-- 新增御守活动 -->
    <el-button type="text" @click="dialogVisible = true">新增御守活动</el-button>
    <el-dialog title="新增御守活动" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">

      <el-form ref="form" :model="form" label-width="110px">
        <el-form-item label="门垫列表">
          <el-select multiple collapse-tags v-model="form.stationIds" placeholder="请选择">
            <el-option v-for="(item, index) in stationList" :key="item.stationMongoCode" :label="item.stationName"
              :value="item.stationCode">
              <span class="check">{{ item.stationName }}</span>
              <span style="margin-left: 8px">{{ item.label }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品列表">
          <el-select multiple collapse-tags v-model="form.product上品Ids" placeholder="请选择">
            <el-option v-for="(item, index) in productList" :key="item.mongoId" :label="item.上品Name" :value="item.上品Id">
              <span class="check">{{ item.上品Name }}</span>
              <span style="margin-left: 8px">{{ item.label }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动开始时间">
          <el-date-picker v-model="form.deliveryStartDate" type="datetime" placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="活动结束时间">
          <el-date-picker v-model="form.deliveryEndDate" type="datetime" placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="默认结束时间">
          <el-date-picker v-model="form.endTime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="活动类型">
                    <template>
                        <el-radio v-model="form.isSync" label="0">无货模式</el-radio>
                        <el-radio v-model="form.isSync" label="1">备货模式</el-radio>
                    </template>
        </el-form-item>

        <el-form-item label="到店类型">
                    <template>
                        <el-radio v-model="form.arrivalType" label="0">大仓配送</el-radio>
                        <el-radio v-model="form.arrivalType" label="1">供应商配送</el-radio>
                    </template>
        </el-form-item>

        <el-form-item label="御守类型">
                    <template>
                        <el-radio v-model="form.presaleType" label="1">御守类型一</el-radio>
                        <el-radio v-model="form.presaleType" label="2">御守类型二</el-radio>
                    </template>
        </el-form-item>

        <el-form-item label="组合御守类型">
                    <template>
                        <el-radio v-model="form.presaleCombinationType" label="0">普通组合御守</el-radio>
                        <el-radio v-model="form.presaleCombinationType" label="1">大可壶组合御守</el-radio>
                    </template>
        </el-form-item>

      <el-form-item>
        
        
        
          

          <el-button type="primary" @click="createActivity">立即创建</el-button>
          <el-button @click="cancelAddActivity()">重置</el-button>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 御守活动信息列表 -->
    <el-table v-loading="listLoading" :data="activityList" element-loading-text="Loading" border fit
      highlight-current-row>
      <el-table-column align="center" label="id" width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="活动ID">
        <template slot-scope="scope">
          {{ scope.row.activityId }}
        </template>
      </el-table-column>
      <el-table-column label="活动履约开始时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.deliveryStartDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="活动履约结束时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.deliveryEndDate }}
        </template>
      </el-table-column>
      <el-table-column label="活动默认结束时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.endTime }}
        </template>
      </el-table-column>
      <el-table-column label="活动创建时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <!-- 查看参与活动的展点信息按钮 -->
        <template slot-scope="scope">
          <el-button type="text"
            @click="activityDetailDialogVisible = true; fetchActivvityStationMap(scope.row.activityId)">展点</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 参与活动的展点信息列表，与  御守活动信息列表操作列中 参与活动的展点信息按钮  关联，通过 activityDetailDialogVisible  stationStopList字段关联 -->
    <el-dialog title="参与活动展点详情" :visible.sync="activityDetailDialogVisible" width="80%" :before-close="handleClose">
      <el-table v-loading="listLoading" :data="stationStopList" element-loading-text="Loading" border fit
        highlight-current-row>
        <el-table-column align="center" label="id" width="110">
          <template slot-scope="scope">
            {{ scope.$index }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="活动id" >
          <template slot-scope="scope">
            {{ scope.row.activityId }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="展点短id">
          <template slot-scope="scope">
            {{ scope.row.stationId }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="0未截单/1已截单">
          <template slot-scope="scope">
            {{ scope.row.isStop }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" >
          <template slot-scope="scope">
            <!-- 御守活动截单按钮 -->
            <!-- <button type="button" @click="stopActivity(scope.row.activityId, scope.row.stationId)"
              :disabled="changeStopActivityButton(scope.row.isStop)">
              <span>停止</span>
            </button> -->

            <el-button  type="text" 
            @click="stopActivity(scope.row.activityId, scope.row.stationId)"  :disabled = "changeStopActivityButton(scope.row.isStop)">截单</el-button>
            <!-- 下单表单 -->
            <!-- <el-button type="text" @click="orderDialogVisible = true" >下单</el-button> -->
            <!-- <button type="button"
              @click="fetchProductByActivityId(scope.row.activityId, scope.row.stationId); orderDialogVisible = true"
              :disabled="changeStopActivityButton(scope.row.isStop)">
              <span>下单</span>
            </button> -->
            <el-button  type="text" 
            @click="fetchProductByActivityId(scope.row.activityId, scope.row.stationId); orderDialogVisible = true"  :disabled="changeStopActivityButton(scope.row.isStop)">下单</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>


    <!-- 下单form表单，与 参与活动的展点信息列表操作列中“下单” 按钮 关联，通过 orderDialogVisible 关联 -->
    <el-dialog title="创建参与御守活动订单" :visible.sync="orderDialogVisible" width="50%" :before-close="handleClose">
      <el-form ref="form" :model="orderInfo" label-width="80px">
        <el-form-item label="商品">
          <el-select multiple collapse-tags v-model="orderInfo.products" placeholder="请选择">
            <el-option v-for="(item, index) in activityProductList" :key="item.mongoId" :label="item.上品Name"
              :value="item.上品Id">
              <span class="check">{{ item.上品Name }}</span>
              <span style="margin-left: 8px">{{ item.label }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="履约开始">
          <!-- <el-input v-model="orderInfo.reservedTimeStart"></el-input> -->
          <el-date-picker v-model="orderInfo.reservedTimeStart" type="datetime" placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="履约结束">
          <!-- <el-input v-model="orderInfo.reservedTimeEnd"></el-input> -->
          <el-date-picker v-model="orderInfo.reservedTimeEnd" type="datetime" placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="用户类型">
          <template>
            <el-radio v-model="orderInfo.bizSubType" label="11">普通</el-radio>
            <el-radio v-model="orderInfo.bizSubType" label="21">大可壶</el-radio>
          </template>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="createOrder">立即创建</el-button>
          <el-button @click="cancelCreateOrder()">重置</el-button>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="orderDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="orderDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getActivityList } from '@/api/activity/activity'
import { addActivity } from '@/api/activity/activity'
import { getStations } from '@/api/activity/activity'
import { getProducts } from '@/api/activity/activity'
import { getStationStopList } from '@/api/activity/activity'
import { stopPreActivity } from '@/api/activity/activity'
import { makeOrder } from '@/api/activity/activity'
import { getProductByActivityId } from '@/api/activity/activity'


export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      activityList: null,
      listLoading: true,
      dialogVisible: false,
      orderDialogVisible: false,
      activityDetailDialogVisible: false,
      form: {
        activityId: '',
        stationIds: [],
        product上品Ids: [],
        deliveryStartDate: '',
        deliveryEndDate: '',
        endTime: '',
        isStop: '',
        bizSubType:11,
        isSync:"0",
        arrivalType:'0',
        presaleType:'1',
        presaleCombinationType:'0'
      },
      stationList: [],
      productList: [],
      stationStopList: [],
      orderInfo: {
        presaleId: '',
        stationId: '',
        products: [],
        reservedTimeStart: '',
        reservedTimeEnd: ''
      },
      activityProductList: []
    }
  },
  created() {
    this.fetchActivities(),
      this.fetchStations(),
      this.fetchProducts()
  },
  methods: {
    fetchActivities() {
      // console.log(this)
      this.listLoading = true
      getActivityList({
        "activityId": this.form.activityId
      }).then(response => {
        console.log(response)
        this.activityList = response.data
        this.listLoading = false
      })
    },
    fetchStations() {
      this.listLoading = true
      getStations({
        "stationCode": null,
        "stationName": null
      }).then(response => {
        console.log(response)
        this.stationList = response.data
        this.listLoading = false
      })
    },
    fetchProducts() {
      this.listLoading = true
      getProducts({
        "上品Id": "",
        "上品Name": "",
        "mongoId": ""
      }).then(response => {
        console.log(response)
        this.productList = response.data
        this.listLoading = false
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    createActivity() {
      console.log(this.form)
      addActivity(
        {
          "activityId": "activitytest",
          "stationIds": this.form.stationIds,
          "product上品Ids": this.form.product上品Ids,
          "deliveryStartDate": this.form.deliveryStartDate,
          "deliveryEndDate": this.form.deliveryEndDate,
          "endTime": this.form.endTime,
          "isStop": 0,
          "isSync":this.form.isSync,
          "arrivalType":this.form.arrivalType,
          "presaleType":this.form.presaleType,
          "presaleCombinationType":this.form.presaleCombinationType
        }
      ).then(response => {
        console.log(response)
        this.dialogVisible = false
        this.form.activityId = ''
        this.fetchActivities()
      })
    },
    fetchActivvityStationMap(activityId) {
      // alert(activityId)
      getStationStopList(
        {
          "activityId": activityId
        }
      ).then(response => {
        this.stationStopList = response.data
        console.log(response)
      })
    },

    // 截单
    stopActivity(presaleId, stationId) {
      alert("确定接单吗？")
      stopPreActivity({
        "presaleId": presaleId,
        "stationIds": [stationId]
      }).then(response => {
        console.log(response)
        // this.stationStopList = response.data
        // this.fetchActivvityStationMap()
        this.stationStopList = this.fetchActivvityStationMap(presaleId)
        this.$message.success(`${response.message}`)
      })
    },
    // 根据disabled属性值来判断按钮是否可用
    changeStopActivityButton(isStop) {
      if (isStop === 0) {
        return false
      } else {
        return true
      }
    },

    // 根据活动创建订单
    createOrder() {
      makeOrder({
        "presaleId": this.orderInfo.presaleId,
        "stationId": this.orderInfo.stationId,
        "products": this.orderInfo.products,
        "reservedTimeStart": this.orderInfo.reservedTimeStart,
        "reservedTimeEnd": this.orderInfo.reservedTimeEnd,
        "bizSubType":this.orderInfo.bizSubType
      }).then(response => {
        console.log(response)
        // this.list = response.data
        this.orderDialogVisible = false
        this.stationStopList = this.fetchActivvityStationMap(this.orderInfo.presaleId)
        this.$message.success(`${response.message}`)
      })
    },
    // 根据活动id得到对应的商品信息
    fetchProductByActivityId(activityId, stationId) {
      this.orderInfo.presaleId = activityId
      this.orderInfo.stationId = stationId
      console.log(this.orderInfo)
      getProductByActivityId({
        "activityId": activityId
      }).then(response => {
        this.activityProductList = response.data
        // console.log(this.activityProductList)
      })
    },
    refetchStations() {
      this.form.activityId = ''
      this.fetchActivities()
    },
    cancelAddActivity(){
      this.form.stationIds =[],
      this.form.product上品Ids = [],
      this.form.deliveryStartDate = "",
      this.form.deliveryEndDate = "",
      this.form.endTime = "",
      this.form.isStop = "",
      this.form.bizSubType = 11
    },
    cancelCreateOrder(){
      this.orderInfo.presaleId = "",
      this.orderInfo.stationId = "",
      this.orderInfo.products = [],
      this.orderInfo.reservedTimeStart = ""
      this.orderInfo.reservedTimeEnd = ""
    }



  }
}
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>